<template>
  <div>
    <el-input
      v-model="searchInput"
      placeholder="搜索部门名称"
      size="small"
      suffix-icon="el-icon-search"
      @input="inputchange"/>
    <div
      v-loading="loading"
      class="search-list">
      <el-breadcrumb
        style="padding: 5px 0;"
        separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          v-for="(item, index) in breadcrumbList"
          :key="index">
          <a
            href="javascript:;"
            @click="breadcrumbBtn(item, index)">{{ item.label }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <flexbox
        v-for="(item, index) in showlist"
        v-if="item.show"
        :key="index"
        class="stru-list">
        <el-checkbox
          v-model="item.isCheck"
          :disabled="item.disabled"
          class="stru-check"
          @change="checkChange(item, index)"/>
        <div
          class="stru-name"
          @click="enterChildren(item)">{{ item.name }}</div>
        <div
          v-if="item.children"
          class="el-icon-arrow-right stru-enter"/>
      </flexbox>
    </div>
  </div>
</template>
<script type="text/javascript">
import { depList } from '@/api/common'

export default {
  name: 'XhStructure', // 新建 structure
  components: {},
  props: {
    value: {
      type: Array,
      default: () => {
        return []
      }
    },
    /** 多选框 只能选一个 */
    radio: {
      type: Boolean,
      default: false
    },
    /** 已选信息 */
    selectedData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      breadcrumbList: [], // 面包屑数据
      selectItems: [], // 选择项
      showlist: [], // 展示数据
      loading: false, // 加载动画
      searchInput: ''
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.selectItems = this.selectedData
    // 部门列表数据
    this.getStructureList()
  },
  methods: {
    // 部门列表数据
    getStructureList() {
      this.loading = true
      depList({
        type: 'tree'
      })
        .then(res => {
          this.showlist = this.addIsCheckProp(res.data)
          this.breadcrumbList.push({ label: '全部', data: this.showlist })

          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 面包屑点击事件
    breadcrumbBtn(item, index) {
      if (this.radio && this.selectItems.length == 1) return
      if (index + 1 <= this.breadcrumbList.length - 1) {
        this.breadcrumbList.splice(index + 1, this.breadcrumbList.length - 1)
      }
      this.showlist = []
      this.showlist = this.handelCheck(item.data)
    },
    // 点击checkbox选中
    checkChange(item, aindex) {
      this.$set(this.showlist, aindex, item)
      var removeIndex = -1
      for (let index = 0; index < this.selectItems.length; index++) {
        const element = this.selectItems[index]
        if (item.id == element.id) {
          removeIndex = index
        }
      }
      if (removeIndex == -1 && item.isCheck) {
        this.selectItems.push(item)
      } else if (removeIndex != -1) {
        this.selectItems.splice(removeIndex, 1)
      }

      /** 单选逻辑 */
      if (this.radio) {
        if (item.isCheck) {
          this.showlist = this.showlist.map(function(element, index, array) {
            if (element.id == item.id) {
              element.disabled = false
            } else {
              element.disabled = true
            }
            return element
          })
        } else {
          this.showlist = this.showlist.map(function(item, index, array) {
            item.disabled = false
            return item
          })
        }
      }

      this.$emit('changeCheckout', { data: this.selectItems })
    },
    /** 数据重新刷新时 循环标记展示数组 */
    handelCheck(list) {
      var self = this
      list = list.map(function(item, index, array) {
        item.isCheck = self.selectItemsHasItem(item)
        return item
      })
      this.inputchange()
      return list
    },
    selectItemsHasItem(item) {
      if (this.selectItems.length == 0) {
        return false
      }
      var hasItem = false
      for (let index = 0; index < this.selectItems.length; index++) {
        const element = this.selectItems[index]
        if (item.id == element.id) {
          hasItem = true
          break
        }
      }
      return hasItem
    },
    /**  */
    /** 点击进入子数组 */
    enterChildren(item) {
      // 保证单选环境下 没有选中 才可进入children
      if (item.children && !(this.radio && this.selectItems.length == 1)) {
        this.showlist = []
        this.showlist = this.handelCheck(this.addIsCheckProp(item.children))
        this.breadcrumbList.push({ label: item.label, data: this.showlist })
      }
    },
    /** 给默认数据加isCheck属性 */
    addIsCheckProp(list) {
      if (list.length > 0) {
        var item = list[0]
        if (item.hasOwnProperty('isCheck')) {
          return list
        } else {
          return list.map(function(item, index, array) {
            item.disabled = false
            item.isCheck = false
            item.show = true
            return item
          })
        }
      }
      return list
    },
    // 父组件 选中
    parentRemoveCheck(data) {
      this.selectItems = data.data
      var temps = this.showlist
      this.showlist = []
      this.showlist = this.handelCheck(temps)
      /** 单选逻辑 */
      if (this.radio) {
        this.showlist = this.showlist.map(function(item, index, array) {
          item.disabled = false
          return item
        })
      }
    },
    /** 搜索 */
    inputchange(val) {
      this.showlist = this.showlist.map(function(item, index, array) {
        if (item.name.indexOf(val) != -1) {
          item.show = true
        } else {
          item.show = false
        }
        return item
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-list {
  padding: 5px;
  height: 248px;
  overflow: auto;
}
.stru-list {
  padding: 5px;
  font-size: 13px;
  .stru-check {
    margin-right: 8px;
  }
  .stru-name {
    flex: 1;
  }
  .stru-enter {
    margin-right: 8px;
  }
}
</style>
